<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>登陆页面</title>

    <STYLE type="text/css">
        body{
            margin: 0;
            padding: 0;
            background-color: #40AFFE;
            background-repeat: no-repeat;
        }
        a{
            color: #666;
            text-decoration: none;
        }
        #bigBox
        {
            margin: 0 auto;
            margin-top: 100px;
            padding: 20px 50px;
            background-color:white;
            width: 500px;
            height: 400px;
            border-radius: 20px;
            text-align: center;
            background-image: linear-gradient(60deg, #29323c 0%, #000000 100%);
        }
        #bigBox h1
        {
            font-size: 40px;
            color: #fffdfd;
        }
        #bigBox .inputBox
        {
            margin-top: 35px;
        }
        #bigBox .inputBox .inputText
        {
            margin-top: 20px;
        }
        #bigBox .inputBox .inputText input
        {
            border: 0;
            padding: 10px 10px;
            border-bottom: 1px solid white;
            background-color: #00000000;
            color: white;
            width: 200px;
            height: 40px;
            font-size: 20px;
        }
        #bigBox .inputBox .inputText i
        {
            color: white;
        }
        #bigBox .inputBox .inputButton
        {
            border: 0;
            width: 200px;
            height: 50px;
            color: white;
            margin-top: 55px;
            border-radius:20px;
            background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%,#b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);
        }


    </STYLE>
</head>
<body>
<div id="bigBox">
    <h1>LOGIN</h1>
    <div class="inputBox">
        <form action="main/login" method="post">
            <div class="inputText">
                <i class="fa fa-user-circle" style="color: whitesmoke;"></i>
                <input type="text" placeholder="用户名" name="username" c/>
            </div>
            <div class="inputText">
                <i class="fa fa-key" style="color: whitesmoke;"></i>
                <input type="password" placeholder="密码" name="password"/>
            </div>
            <input type="submit" class="inputButton" value="LOGIN" onclick="return submitForm(event);" />
        </form>
    </div>
</div>
</body>
<script>
    function submitForm(event) {
        event.preventDefault(); // 阻止表单默认提交行为

        var form = event.target.form;
        var formData = new FormData(form);

        fetch(form.action, {
            method: 'POST',
            body: formData
        }).then(response => {
            if (response.ok) {
                console.log("11111");
                // 如果HTTP响应状态码表示成功（200-299之间），继续解析JSON
                return response.json();
            } else {
                throw new Error('Failed to fetch login information');
            }
        })
            .then(data => {
                // 检查后端返回的code字段
                if (data.code == 3) {
                    // 登录成功，存储并使用token
                    localStorage.setItem('authToken', data.token);
                    // layer.msg("登录成功");
                    // 登录成功逻辑
                    console.log("登录成功222");
                    window.location.href = "/techshine_war/index"; // 跳转至主页
                }
                else {
                    // 登录失败逻辑
                    console.error( '未知错误');
                    // 在此处可以展示错误消息给用户，例如弹窗提示等
                    //alert(data.msg);
                }
            })

        return false;
    }
</script>
</html>